<template>
  <div class="page-container">
    <div class="search">
      <div class="formBox">
        <el-form class="formClass" :label-width="$globalCss.formLabelWidth_default" label-position="top" ref="formSearch"
          :rules="rules" :model="formData" onsubmit="return false">
          <el-form-item :label="$t('label_operate_network')" prop="placeId">
            <ex_super_input v-model="formData.placeId" class="w_fill" type='select'
              url="/tms-api/base/TmsServiceOutletRpc/selectLikeServiceOutletLabel.json"
              :option="{ label: 'placeName', value: 'id' }" @initList="networkDefault" />
          </el-form-item>
          <el-form-item :label="$tt('label_package_weight')">
            <auto_weight_input v-model="formData.autoWeight"></auto_weight_input>
          </el-form-item>
          <el-form-item :label="$tt('label_box_face')" prop="code">
            <div class="flex_row_center">
              <el-input v-model.trim="formData.code" clearable class="form_input_default" ref="codeInput"
                v-on:keyup.native="scanCodeKeyInput" @blur="blurCodeInput" style="flex: 1;" />
              <div>
                <el-button class="mg_l2" type="primary" @click="validtrackNumber"><i class="iconfont icon-scan"/> {{ $tt('label_scan') }}</el-button>
                <el-checkbox class="mg_h2" @change="autoFocusSetChange" v-model="autoFocusSet" border>{{
                  $tt('label_auto_focus') }}</el-checkbox>
              </div>
            </div>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$tt('label_customer_name')">
                <el-input v-model="formData.customerName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$tt('label_carrier')">
                <el-input v-model="formData.esCarrierName" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>


        </el-form>
      </div>
      <div class="statistics">
        <div class="count">
          {{ formTable.tableData.length }}
        </div>
        <div class="title">{{ $t('label_scan_count') }}</div>
      </div>
    </div>

    <div class="layout-bottom">

      <div class="btns">
        <el-button type="primary" @click="onSubmit('/tms-api/waybill/TmsExpressOperationRpc/express_measure.json')">{{
          $t('label_submit') }}</el-button>
        <el-button @click="downloadImportTemp">
          {{ $tt('label_download_import_template') }}<i class="el-icon-download el-icon--right"></i>
        </el-button>
        <button_select_file @input="importExcel">
          {{ $tt('label_import') }}
        </button_select_file>
        <el-button @click="downloadXlsx('label_check_pack_measure')">{{ $t('label_export') }}</el-button>
        <el-button @click="deleteFn">{{ $t('label_delete') }}</el-button>
      </div>
      <el-form :model="formTable" ref="formTableRef" :rules="formTableRules" style="flex: 1;">
        <ex_super_table ref="MainTable" class="main-table" v-bind="tableOption" style="height:100%;"
          :data="formTable.tableData" :autoFlex="true" :autoPage="false" @selection-change="list => selection = list">
        </ex_super_table>
      </el-form>
    </div>
  </div>
</template>
<script>
import auto_weight_input from '@/component/serial_port/auto_weight_input.vue'
import expressOperate from '@/mixin/tms-express-operate.js'
export default {
  title: "label_check_pack_measure",
  mixins: [expressOperate],
  components: { auto_weight_input },
  data() {
    return {
      formData: {
        actionCode: 'EXPRESS_MEASURE'
      },
      // 扫码查询接口地址
      scanPackageNoUrl: "/tms-api/waybill/TmsExpressQueryRpc/scan_start_next.json",
      tableOption: {
        model: [
          { type: 'selection', clickToggle: true, keyGroup: 'label_table_operate' },
          { key: 'transportNumber', label: 'label_box_face', 'min-width': 120, 'show-overflow-tooltip': true, },
          { key: 'customerName', label: 'label_customer_name', 'min-width': 120, 'show-overflow-tooltip': true, },
          { key: 'esCarrierName', label: 'label_carrier', 'min-width': 120, 'show-overflow-tooltip': true },
          // { key: 'orderNo', label: 'label_order_code', 'min-width': 120, 'show-overflow-tooltip': true },
          // { key: 'totalQuantity', label: 'label_inner_piece_count', 'min-width': 120, 'show-overflow-tooltip': true },
          // { key: 'skuNames', label: 'label_sku', 'min-width': 120, 'show-overflow-tooltip': true },
          // {
          //   key: 'totalVolume', label: 'label_volume', 'min-width': 120, 'show-overflow-tooltip': true,
          //   render: (h, { column, row, index }) => {
          //     if (row.edit) {
          //       return (
          //         <el-form-item
          //           prop={`tableData.${index}.${column.property}`}
          //           rules={this.formTableRules.totalVolume}
          //         >
          //           <ex_super_input
          //             value={row.totalVolume}
          //             onInput={value => {
          //               this.$set(row, column.property, value)
          //             }}
          //           >
          //           </ex_super_input>
          //         </el-form-item>
          //       )
          //     } else {
          //       return (
          //         <span>{row.totalVolume}</span>
          //       )
          //     }
          //   }
          // },
          {
            key: 'totalWeight', label: 'label_weight', 'min-width': 120, 'show-overflow-tooltip': true,
            render: (h, { column, row, index }) => {
              if (row.edit) {
                return (
                  <el-form-item
                    prop={`tableData.${index}.${column.property}`}
                    rules={this.formTableRules.totalWeight}
                  >
                    <ex_super_input
                      value={row.totalWeight}
                      onInput={value => {
                        this.$set(row, column.property, value)
                      }}
                    >
                    </ex_super_input>
                  </el-form-item>
                )
              } else {
                return (
                  <span>{row.totalWeight}</span>
                )
              }
            }
          },
          {
            type: 'operate', width: 170, operate: [
              {
                label: "label_edit",
                click: (row) => this.clickEdit(row),
                if: (row) => !row.edit
              },
              {
                label: "label_save",
                click: (row) => this.clickEditSave(row),
                if: (row) => row.edit
              },
              {
                label: "label_remove", class: "button_text_danger",
                click: (row, i) => this.removeBox(i)
              },
            ]
          }
        ],

      }

    };
  },

};

</script>
<style lang="less" scoped >
.page-container {
  background-color: #F7F8FA;
  box-shadow: none;
  padding: 0;
}

.search {
  display: flex;
  justify-content: space-between;

  .formBox {
    background-color: #fff;
    flex: 1;
    border-radius: 4px;
    padding-top: 12px;

    .formClass {
      width: 800px;
      margin-left: 20px;
    }
  }


  .statistics {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    margin-left: 8px;
    border-radius: 4px;
    width: 30%;

    .count {
      font-size: 80px;
      color: #F56C6C;
    }
  }
}


.btns {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 10px;
}

.layout-bottom {
  margin-top: 8px;
  flex: 1;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  padding: 12px;
}
</style>
